<template>
<!-- <div>app</div> -->
<!-- 使用根模块里的state的数据 -->
  <div>{{$store.state.username}}</div>
  <button @click="fn">改变名字</button>
  <button @click="$store.dispatch('updatename')"></button>
  <button @click="$store.commit('editename')">改变</button>
  <!-- 使用根模块getters的数据 -->
  <div>{{$store.getters['newname']}}</div>
</template>

<script>
import { useStore } from 'vuex'
export default{ 
    name:'App',
    setup(){
      // 使用vuex仓库
      const store=useStore();
      // 使用根模块state的数据
      console.log(store.state.username);
      console.log(store.getters.newname);
      // state.commit('editename')
      const fn=()=>{
        store.commit('editename')
      }
      // 调用根模块action函数
      store.dispatch('updateName')
      return  {fn}

    }
}
</script>

<style>

</style>
